---
import type { Fighters } from '@/types/fighters'
interface Props {
  boxers: Fighters[]
}

const { boxers } = Astro.props
---

<div id="fighter-container" class="pointer-events-none absolute inset-0 flex flex-col items-center">
  <div class="z-1 relative top-96 mx-auto flex h-[4.5rem] w-full items-center justify-center">
    {
      boxers.map(({ id, name }) => (
        <div class="relative h-20 overflow-hidden">
          <img
            data-id={`hero-text-${id}`}
            src={`/images/fighters/text/${id}.webp`}
            alt={name}
            decoding="async"
            class="mask-fade-text hidden h-full w-auto"
            fetchpriority="low"
            transition:name={`text-${id}`}
          />
          <div
            id={`mask-fade-text-${id}`}
            class="absolute inset-0 -translate-x-full rotate-45 bg-gradient-to-tr from-transparent via-white/20 to-transparent transition-transform duration-[2s] ease-in-out"
          />
        </div>
      ))
    }
  </div>

  <div
    class="mask-fade-bottom relative bottom-0 mx-auto flex h-[80vh] w-full items-center justify-center"
  >
    {
      boxers.map(({ id, name }) => (
        <img
          transition:name={`image-${id}`}
          data-id={`hero-image-${id}`}
          src={`/images/fighters/big/${id}.webp`}
          alt={name}
          decoding="async"
          class="absolute hidden h-full w-auto object-cover lg:object-contain"
          fetchpriority="low"
        />
      ))
    }
  </div>
</div>
